<template>
  <span class="popover-view-wrapper">
      <span v-if="trigger === 'manual'">
        <el-popover
            v-model="visiableStatus"
            :trigger="trigger"
            v-bind="$attrs"
            @show="handleShow"
            @after-enter="handleAfterEnter"
            @hide="handleHide"
            @after-leave="handleAfterLeave"
        >
            <slot></slot>
            <span slot="reference">
                <slot name="reference"></slot>
            </span>
        </el-popover>
      </span>
      <span v-else-if="trigger === 'focus'">
        <el-popover
            ref="popover"
            :trigger="trigger"
            v-bind="$attrs"
            @show="handleShow"
            @after-enter="handleAfterEnter"
            @hide="handleHide"
            @after-leave="handleAfterLeave"
        >
            <slot></slot>
        </el-popover>
        <span v-popover:popover><slot name="focus"></slot></span>
      </span>
      <span v-else>
        <el-popover
            :trigger="trigger"
            v-bind="$attrs"
            @show="handleShow"
            @after-enter="handleAfterEnter"
            @hide="handleHide"
            @after-leave="handleAfterLeave"
        >
            <slot></slot>
            <span slot="reference">
                <slot name="reference"></slot>
            </span>
        </el-popover>
      </span>
  </span>
</template>

<script>
export default {
    name:'PopoverView',
    inheritAttrs:false,
    props:{
        trigger:{
            type:String,
            default:'click'
        },
        visiable:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return {
            visiableStatus:false
        }
    },
    watch:{
        visiable(val){
            this.visiableStatus = val;
        }
    },
    methods:{
        handleShow(){
            this.$emit('show');
        },
        handleAfterEnter(){
            this.$emit('after-enter');
        },
        handleHide(){
            this.$emit('hide');
        },
        handleAfterLeave(){
            this.$emit('after-leave');
        }
    }
}
</script>

<style lang="scss" scoped>
    .popover-view-wrapper{

    }
</style>